<template>
  <el-dialog :title="dialog.title" :visible.sync="dialog.visible" top="5vh" width="70%">
    <el-table
    	ref="emptable"
      class="list-table"
      v-loading="listLoading"
      :data="emplist"
      stripe
      size="small"
      fit
      highlight-current-row
      style="width: 100%;">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column  prop="employeeName">
	      <template slot="header" slot-scope="{}">
	        <p style="margin: 0;">姓名</p>
	      </template>
	    </el-table-column>
	    <el-table-column :show-overflow-tooltip="true" prop="deptName" width="150">
	      <template slot="header" slot-scope="{}">
	        <p style="margin: 0;">部门名称</p>
	      </template>
	    </el-table-column>
	    <el-table-column :show-overflow-tooltip="true" prop="status">
	      <template slot="header" slot-scope="{}">
	        <p style="margin: 0;">员工状态</p>
	      </template>
	      <template slot-scope="scope">
	        <el-tag :type="scope.row.employeeStatus | employeeStatus" size="small">{{scope.row.employeeStatus |
	          employeeStatus('text')}}
	        </el-tag>
	      </template>
	    </el-table-column>
	    <el-table-column :show-overflow-tooltip="true" prop="postName">
	      <template slot="header" slot-scope="{}">
	        <p style="margin: 0;">岗位/职务</p>
	      </template>
	    </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
    	 <el-button type='primary' @click="handleSubmit">确定</el-button>
      <el-button @click="dialog.visible = false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>

  import filters from '@/filters/filters'
  import tagFilter from '@/filters/tagFilter'

  export default {
    name: 'empchoose',
    mixins: [filters, tagFilter],
    components: {},
    data() {
      return {
        dialog: {
          visible: false, // 是否显示
          title: '员工选择'
        },
        listLoading: false,
        emplist: []
      }
    },
    props: {
      visible: {
        type: [Boolean],
        required: true,
        default: false
      },
      detailData: {
        type: Array,
        default() {
          return null
        }
      }
    },
    computed: {},
    methods: {
      async getListData() { // 获取列表数据
        
      },
      async initData() { // 初始化数据
       
      },
      
      handleSubmit(){
      	let selection = this.$refs.emptable.store.states.selection;
      	
      	if(!selection.length){
      		this.$notify.error({
              title: '错误',
              message: '请选择一个员工！'
            })
      		return;
      	}
      	
      	for(let i=0;i<this.emplist.length;i++){
      		let emp =this.emplist[i];
      		//判断当前员工是否在选中队列中
      		let chosen = false;
      		
      		for(let j=0;j<selection.length;j++){
      			if(selection[j].employeeId == emp.employeeId){
      				chosen = true;
      			}
      		}
      		if(chosen){
      			this.emplist.splice(this.emplist.findIndex(item => item.employeeId === emp.employeeId), 1)
      			i--;
      		}
      		
      	}
      	
        this.$emit('choose-emp-list', selection)
      }
    },
    watch: {
      visible(newVal, oldVal) {
        if (newVal !== this.dialog.visible) {
          this.dialog.visible = newVal
          if (newVal) {
            this.initData()
          }
        }
      },
      'dialog.visible'(newVal, oldVal) {
        this.$emit('update:visible', newVal)
      },
      detailData(newVal, oldVal){
      	if (newVal !== oldVal) {
      		
      		this.emplist = newVal
      		//console.log(newVal)
         
        }
      }
    },
    created() {
    	
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>

</style>
